@extends('layouts.appManager')
@section('title')
    申请服务器
@endsection

@section('style')
    <style>
        .el-card.selected{
            border-color: #409EFF;
            background-color: #ecf5ff;
        }
        .el-card li{
            /*font-size: 12px;*/
        }
        .el-card li span{
            font-size: 24px;
        }
    </style>
@endsection

@section('content')
    <div class="container py-5">

        <div class="card panel mb-4">
            <div class="card-header">{{$server->name}}：申请服务器</div>
        </div>

        <el-alert
            title="申请服务器后，您不需要过问服务器的购买和配置，我们将为您采购服务器并且安装配置好所有服务端功能。所有工作将在24小时内完成。"
            type="info"
            effect="dark">
        </el-alert>
        <br><br>

        <el-row :gutter="12">
            <el-col v-for="item in machineList" :key="item.index" :span="6">
                <div @click="curMachine=item">
                    <el-card :shadow="selectIndex===item.index?'always':'never'" :class="{selected:selectIndex===item.index}">
                        <h3>@{{ item.name }}</h3>
                        <br>
                        <ul>
                            <li>CPU：<span>@{{ item.cpu }}</span> 核</li>
                            <li>内存：<span>@{{ item.memory }}</span> G</li>
                            <li>带宽：<span>@{{ item.mbps }}</span> M</li>
                            <li>价格：<span>@{{ item.price }}</span> 元/月</li>
                        </ul>
                        <br>
                        <div class="text-right">
                            <el-button type="primary" @click="curMachine=item" size="small">选择</el-button>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <br>


        <div class="text-right">
            <div v-if="curMachine">
                服务器：@{{ curMachine.price }} / 月
                <br>
                安装服务费：100
                <hr>
                合计：@{{ curMachine.price+100 }}
            </div>
            <div v-else>
                未选择服务器类型
                <br>
                安装服务费：100
            </div>
            <br><br>

            <el-button type="primary" @click="selectIndex=item.index">结算</el-button>
        </div>


    </div>
@endsection
@section('script')
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                curMachine:null,
                machineList:[
                    {index:1,name:'低配',cpu:2,memory:4,mbps:3,price:70},
                    {index:2,name:'中配',cpu:4,memory:8,mbps:5,price:150},
                    {index:3,name:'高配',cpu:8,memory:16,mbps:10,price:350},
                    {index:4,name:'顶配',cpu:16,memory:32,mbps:20,price:800},
                ]
            },
            computed:{
                selectIndex(){
                    return this.curMachine?this.curMachine.index:0;
                }
            }

        });
    </script>

@endsection
